<template>
  <div>
      <div class="wrap">
        <h2>state</h2>
        <p>a:{{ a }}</p>
        <p>b:{{ b }}</p>
      </div>

      <div class="wrap">
        <h2>getters</h2>
        <p>2a:{{ doubleA }}</p>
        <p>2b:{{ doubleB }}</p>
        <p>2(a+b):{{ doubleAB }}</p>
      </div>

      <div class="wrap">
        <h2>mutations</h2>
        <p>
        <button @click="addA">a++</button>
        <button @click="addA_N(10)">a+10</button>
        </p>
        <p><button  @click="$store.commit('addB')">b++</button></p>
      </div>


      <div class="wrap">
        <h2>actions</h2>

        <!-- 不考虑 异步操作是否结束 -->
        <p>
            <button @click="addA_Async">a++</button>
            <button @click="addAN_Async(10)">a+10</button>   
        </p>
        <p><button  @click="addB_Async">b++</button></p>
        <!-- 考虑 异步操作是否结束(Promise状态改变) -->
        <p>
          <button  @click="addBoth">先加a,在加b</button>
          <button  @click="addAB_Async">先加a,在加b</button>
        </p>
      </div>
  </div>
</template>

<script>

  // 手动优化  
  // 1. vuex中提供的内容 => 数据(state,getters) / 方法  ,手动取值太麻烦
  // 2. 数据部分(state,getters) => 是否可以将其通过计算属性 绑定到当前Vue实例, 使用时直接使用计算属性 


  // 
  
  export default {
      computed:{
        // state部分
        a:function () {
          return this.$store.state.a;
        },
        b:function () {
          return this.$store.state.b;
        },
        A:function () {
          return this.$store.state.a;
        },

        // getters
        doubleA:function(){
          return this.$store.getters.doubleA;
        },
        doubleB:function(){
          return this.$store.getters.doubleB;
        },
        doubleAB:function(){
          return this.$store.getters.doubleAB;
        },

      },
      methods:{
        // 函数部分
        // 同步
        addA(arg){
            this.$store.commit("addA",arg);
        },
        addA_N(arg){
            this.$store.commit("addA_N",arg);
        },
        addB(arg){
            this.$store.commit("addB",arg);
        },

        // 异步
        addA_Async(arg){
            this.$store.dispatch("addA_Async",arg);
        },
        addAN_Async(arg){
            this.$store.dispatch("addAN_Async",arg);
        },
        addB_Async(arg){
            this.$store.dispatch("addB_Async",arg);
        },
        addAB_Async(arg){
            this.$store.dispatch("addAB_Async",arg);
        },

        addBoth(){
          this.$store.dispatch('addA_Async').then(()=>{
            console.log("a++完毕");
            return this.$store.dispatch('addB_Async');  // 如果then方法返回值也是一个Promise实例,等Promise实例状态改变之后,在向后传递
          }).then(()=>{
            console.log("b++完毕");
          }).catch(err=>{
            console.log("发生错误",err)
          })
        }
      },
      mounted(){
        console.log("store",this.$store);
      }
  }
</script>

<style  scoped>
.wrap{
  padding: 5px;
  border:1px dashed #333;
  margin: 5px;
}
</style>